<template>
  <div class="overflow-hidden cms-views-container game-cms-pages">
    <header class="h-10 leading-10 px-4 bg-[#222] text-white text-center text-base pb-2">游戏专区</header>
    <div class="absolute w-full h-[114px] top-10 left-0 right-0 bg-[#222] z-0 mb-5">
      <span
        class="inline-block bg-gradient-to-r from-black to-[#ff613f] w-[90px] h-full absolute right-0 top-0 opacity-25"
      ></span>
    </div>
    <div class="absolute px-4 top-14">
      <div v-for="(item, index) in data" class="relative" :key="index">
        <img :src="item.url" alt="" :key="index" class="block w-full mb-4 rounded-lg" />
        <span class="absolute px-2 py-1 text-xs text-white rounded-lg right-2 bottom-2 game-text">广告</span>
      </div>
    </div>

    <CmsBottomBar active="game" />
  </div>
</template>

<script setup lang="ts">
import CmsComponents from '@cms/components'

const { CmsBottomBar } = CmsComponents

const data = [
  {
    url: 'https://img2.baidu.com/it/u=3060668883,1714019543&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
  },
  {
    url: 'https://img2.baidu.com/it/u=1294794409,668249183&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
  },
  {
    url: 'https://img0.baidu.com/it/u=4278642832,899795868&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
  },
  {
    url: 'https://img0.baidu.com/it/u=3661764172,1902661702&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
  },
  {
    url: 'https://img0.baidu.com/it/u=3661764172,1902661702&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
  }
]
</script>

<style scoped lang="less">
.game-cms-pages {
  .game-text {
    background: rgba(0, 0, 0, 0.4);
  }
}
</style>
